import React, { useState } from "react";
import style from "./style.module.scss";

interface valueRawState {
  type: string;
  val: string;
}

interface PropsType {
  labelText?: string;
  tooltip?: string;
  value?: string;
  getValue?: (val: valueRawState) => void;
}

export const ProFileInput: React.FC<PropsType> = ({
  labelText,
  tooltip,
  value,
  getValue,
}) => {
  const [text, setText] = useState<string>(value as string);
  const changeValue = () => {
    if (text) {
      getValue &&
        getValue({
          type: labelText ? (labelText as string) : "other",
          val: text,
        });
    }
  };
  return (
    <div className={style.proFile_input_wrapper}>
      {labelText && (
        <label htmlFor="style.proFile_input" className={style.proFile_label}>
          {labelText}
        </label>
      )}
      {tooltip && (
        <input
          type="textarea"
          id="style.proFile_input"
          className={style.proFile_input}
          placeholder={tooltip}
          value={text}
          onChange={(e) => setText(e.target.value)}
          onBlur={() => changeValue()}
        />
      )}
    </div>
  );
};

export default ProFileInput;
